<template>
	<u-modal :show="show" :negativeTop="200" :title="title" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom>
		<view class="f-1 w100 f14">
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">排序</view>
				<view class="f-g-1">
					<u--input placeholder="请输入排序" :customStyl="{background:'#f3f3f3'}" v-model="form.sort">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10"><text class="crb">*</text>加料分组名称</view>
				<view class="f-g-1">
					<u--input placeholder="请输入加料分组名称" :customStyl="{background:'#f3f3f3'}" v-model="form.name">
					</u--input>
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	export default {
		components: {
			tColorPicker,
		},
		props: {
			mode: {
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {
					sort: 1,
					bgColor: '',
					name: '',
				},
				color: {
					r: 255,
					g: 0,
					b: 0,
					a: 0.6
				},
				show: false,
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			open(v) {
				if (v && v.id) {
					this.title = '编辑加料分组'
					this.form = JSON.parse(JSON.stringify(v))
				} else {
					this.form = {
							sort: 1,
							name: '',
						},
						this.title = '新增加料分组'
				}
				this.show = true
			},
			close() {
				this.show = false
				this.form = {
					sort: 1,
					name: '',
				}
			},
			openColor(item) {
				this.$refs.colorPicker.open();
			},
			confirm(e) {
				this.form.bgColor = e && e.hex
			},
			async save() {
				if (!this.form.name) {
					return uni.showToast({
						title: '请输入加料分组名称',
						icon: 'none'
					})
				}
				this.form.storeId = this.storeId
				const {
					msg
				} = await this.beg.request({
					url: this.form.id ? `${this.api.materialCatList}/${this.form.id}` : this.api.materialCatList,
					method: this.form.id ? 'PUT' : 'POST',
					data: this.form
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.close()
				this.$emit('save')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 140rpx;
		text-align: right;
	}

	.colorPick {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		height: 32px;
		width: 32px;
		padding: 4px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		font-size: 0;
		position: relative;
		cursor: pointer;
	}
</style>